body{
	background: #99ccff;
}
/* this is for the back flap of the folder */
.folder{
	-webkit-perspective: 500px;
	perspective: 500px;
	width: 340px;
	height: 100px;
	background: #ffd480;
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	border-top-right-radius: 5px;
	cursor: pointer;
	-webkit-transition: all 300ms ease;
	transition: all 300ms ease;
}
/* this is for the folder's tab */
.folder::before{
	width: 80px;
	height: 20px;
	content: '';
	background: #ffd480;
	position: absolute;
	top: -20px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}
/* this is for the folder's front flap */
.folder::after{
	width: 340px;
	height: 210px;
	position: absolute;
	content: '';
	background: #ffcb66;
	top: 40px;
	box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.3);
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	/* the transform property rotates the front flap of the folder a bit t0 make it look 3D */
	-webkit-transform: rotateX(-10deg);
	transform: rotateX(-10deg);
	-webkit-transition: all 400ms ease;
	transition: all 400ms ease;
}
/* this is for the piece of paper inside the folder */
.folder-inside{
	width: 320px;
	height: 200px;
	position: absolute;
	background: #fff;
	top: 20px;
	left: 10px;
	box-shadow: 0 0 5px 5px rgba(0, 0, 0, 0.05);
	-webkit-transform: rotate(-1deg);
	transform: rotate(-1deg);
	border: 1px solid #ddd;
	-webkit-transition: all 200ms ease;
	transition: all 200ms ease;
}
/* this is for the lines on the paper */
.folder-inside::before{
	content: '';
	/* we're going to use linear gradients to create the lines */
	background: -webkit-repeating-linear-gradient(145deg, #ffffff, #ffffff 10px, #333333 7px, #333333 20px);
	background: repeating-linear-gradient(0deg, #ffffff, #ffffff 10px, #333333 10px, #333333 20px);
	position: absolute;
	top: -37px;
	left: 65px;
	width: 200px;
	height: 290px;
	color: #343434;
	font-size: 60px;
	line-height: 30px;
	-webkit-transform: rotate(-90deg);
	transform: rotate(-90deg);
	opacity: 0.15;
}
/* finally let's get this folder to rotate when we hover on it */
.folder:hover{
	-webkit-transform: translate(-50%, -52%);
	transform: translate(-50%, -52%);
}
.folder:hover::after{
	-webkit-transform: rotateX(-15deg);
	transform: rotateX(-15deg);
}
.folder:hover .folder-inside{
	-webkit-transform: rotate(-7deg) translateY(-15%);
	transform: rotate(-7deg) translateY(-15%);
}
/* hover over the folder to see the effect in action */